<template>
  <div>
    <!--头部-->
				<div class="lyx_header hidden">
					<div class="lyx_company_info">
						<div class="hd v_arrow_down" id="order_vendor">由<span class="name">昆明青年旅行社</span>直售</div>
						<div class="bd hidden" id="order_vendor_info">
							<p class="tips">本产品由零售商提供，有关资源确认、合同签署、行程安排等事宜，可咨询客服</p>
							<p class="tips">服务时间：周一至周日：00:00至23:59</p>
							<div class="tel">咨询电话<span class="phones_num">4008663333转52006</span></div>
							<div class="tips">您提交订单后，商家会与您联系确认</div>
						</div>
					</div>
				</div>

				<!--主体-->
				<div class="lyx_content">

					<!--添加联系人员-->
					<div class="order_rn_box">
						<div class="info_title"><span class="title_name">联系人信息</span></div>
              <yd-cell-group>
                <yd-cell-item>
                    <span slot="left">用户名：</span>
                    <yd-input slot="right" v-model="name" placeholder="请输入用户名"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">手机号：</span>
                    <yd-input slot="right" v-model="mobile" regex="mobile" placeholder="请输入手机号码"></yd-input>
                </yd-cell-item>
                <yd-cell-item>
                    <span slot="left">邮箱：</span>
                    <yd-input slot="right" v-model="email" :debug="true" regex="email" placeholder="可以不填写"></yd-input>
                </yd-cell-item>
            </yd-cell-group>
					</div>

          <!--添加出游人员-->
          <div class="order_rn_box order_topbanner">
            <div class="order_rn_info">
              <div class="item item_date">出发日期<span class="time">{{datetime}}</span></div>
              <div class="item item_adult">成人<span class="numb">{{g_manNum}}</span></div>
              <div class="item item_children">儿童<span class="numb">{{g_childNum}}</span></div>
              <!--<div class="item item_restrict" id="lyx_ydxz" data-modal="modal-20">预订限制</div>-->
            </div>
            <ul class="order_rn_list" id="tour_user_list" v-for="tour in tourist" :key="tour.index">
              <li>
                <div class="name_title"><span class="order_person " data-id="43983450">成人</span></div>
                <div class="name_box rn_arrow_r" data-type="1" data-id="43983450"><span>{{tour.nickname}} </span></div>
              </li>
            </ul>
            <!-- <div class="order_change_traveller" ref="abc" v-show="tourristHide == '0'">
              <p class="guarantee_tips">为了您顺利出行，请务必保证填写项与出游所持证件一致</p>
              <div class="btn order_sel_passenger select_tour_user">更换出行人</div>
            </div> -->
            
            <div class="order_rn_traveller" v-show="tourristHide == '1'">
              <span class="btn order_sel_passenger select_tour_user" @click="selectTourist()">添加出行人</span>
              <p class="guarantee_tips">为了您顺利出行，请务必保证填写项与出游所持证件一致</p>
            </div>
          </div>
          <!--集合地点-->
          <div class="order_rn_box" @click="checkaddress()">
            <yd-cell-item arrow type="label" id="showUserPicker">
                <span slot="left" class="title_name">集合地点：</span>
                <yd-input slot="right" v-model="collectionPlace" placeholder=""></yd-input>
                <span slot="right"></span>
            </yd-cell-item>
          </div>
            
          <!--服务条款-->
          <div class="order_rn_box">
            <div class="order_condition">
              <div class="p_bottom_tips02">
                <p class="default ">70岁以上的出行人需确保身体健康适宜出行旅游，本次旅游活动中，若由于自身身体原因发生不适或人身意外及任何不良后果，均由本人承担全部责任。</p>
              </div>
              <div class="p_bottom_notice02">
                <p class="order_tips">点击下一步表示已阅读并同意
                  <a href="javascript:void(0);" class="v_blue" data-sk-eid="hcc_information">预订须知和重要条款</a>
                </p>
              </div>
            </div>
          </div>
          </br>
          </br>
          </br>
				</div>
				<!--lyx_content end-->
        <!--底部组件-->
        <div class="">
          <yd-tabbar fixed bgcolor="#fff" class="mod_foot_acitons">
            <div class="foot_order_info foot_order_info2 js_concat_pm" style="display:none"><span class="item valet_order_btn1 js_concat_pm_tel"><a href="###">联系产品经理</a></span></div>
            <div class="js_submit_box foot_order_info foot_order_info2">
              <span class="item item_col1">
                <i class="loading_ico js-loading-step1" style="margin-top: 8px; display: none;"></i> 
                <span class="js-price-step1" data-sk-eid="hy_ctr_costdetail">
                  <span class="ft_sum_name">总额：</span>
                  <span class="price"><dfn>¥{{g_totalMoney}}</dfn>
                    <span></span>
                  </span>
                </span> 
                <span class="js-not-enough" style="display: none;">
                  <span class="ft_sum_name">总额：待确认</span>
                </span>
              </span> 
              <span class="item item_col3 js_btn_next js_submit_1 js_submit_4" data-sk-eid="hy_ctr_tap_next">
                <a href="javascript:;" class="btn_link5" id="lyx_jxyd" ref="goodsorderbtn" @click="creatOrder()">确认</a>
              </span>	
            </div>
          </yd-tabbar>
        </div>
        <!-- 底部弹窗 -->
        <yd-actionsheet :items="tourPlaces" v-model="show2"></yd-actionsheet>
      

  </div>
</template>

<script>

export default {
  name: 'boutiquelinestep1',
  // components: {
  //   VuePickers
  // },
  data() {
    return {
      name: '',
      mobile: '',
      email: '',
      show1: false,
      show2: false,
      product_id: this.$route.query.id,
      datetime: this.$route.query.datetime,
      g_manNum: this.$route.query.manNum, // 成人数量
      g_childNum: this.$route.query.childNum, // 儿童数量
      g_manPrice: this.$route.query.manPrice, // 成人价格
      g_childPrice: this.$route.query.childPrice, // 儿童价格,
      g_totalMoney: this.$route.query.totalMoney,
      tourristHide: '0',
      userist: this.$route.query.userist,
      tourist: [],
      tourPlaces: [],
      collectionPlace: ''
    }
  },
  mounted() {
    this.load();
    this.tourUserListHtml();
    console.log(this.userarr);
    this.getPlaceList(this.product_id);
  },
  methods: {
    load() {
      console.log(this.datetime, this.g_manNum, this.g_childNum, this.g_manPrice, this.g_childPrice);
    },
    checkaddress() {
      this.show2 = true;
    },
    selectTourist() {
      this.$router.push({path: 'boutique_adduser', query: {'id': this.product_id, 'g_manNum': this.g_manNum, 'g_childNum': this.g_childNum, 'datetime': this.datetime}});
    },
    // 计算价格
    sumMoney(totalMoney, yhMoney) {
      console.log(totalMoney);
      console.log(yhMoney);
      // var money_html = parseInt(totalMoney*100) - parseInt(yhMoney);
      // $('.foot_price').html('<dfn>¥</dfn>' + money_html/100);
      // $('.foot_price').data('money',money_html/100);
    },
    // 顶部显示隐藏功能
    topUpandDown() {
      // $('#order_vendor').off().on('tap', function() {
      //   if($(this).hasClass('v_arrow_up')) { //向上尖头
      //     $(this).removeClass('v_arrow_up');
      //     $(this).addClass('v_arrow_down');
      //     $('#order_vendor_info').addClass('hidden');
      //   } else {
      //     $(this).removeClass('v_arrow_down');
      //     $(this).addClass('v_arrow_up');
      //     $('#order_vendor_info').removeClass('hidden');
      //   }
      // })
    },
    tourUserDisplay(storeInfo) {
      // if(storeInfo.touruser != '' && storeInfo.touruser != undefined) {
      //   var friendInfo = storeInfo.touruser;
      //   var html = '';
      //   var type = true;
      //   for(i = 0; i < friendInfo.length; i++) {
      //     html += tourUserListHtml(friendInfo[i]);
      //     var fdata = friendInfo[i]
      //     if(fdata.type == 1 && type) {
      //       if(fdata.mobile != '' || fdata.mobile != undefined) {
      //         $("#lyx_lxry").val(fdata.name);
      //         $("#lyx_lxdh").val(fdata.mobile);
      //         type = false;
      //       }
      //     }
      //   }
      //   $('#tour_user_list').html(html);
      //   $('.order_rn_list').removeClass('hidden');
      //   $('.order_change_traveller').removeClass('hidden');
      //   $('.order_rn_traveller').addClass('hidden');
      // } else {
      //   $('.order_rn_list').addClass('hidden');
      //   $('.order_change_traveller').addClass('hidden');
      //   $('.order_rn_traveller').removeClass('hidden');
      // }
    },
    // 人员列表 代码片段
    tourUserListHtml(data) {
      console.log('~~~~~~~人员列表');
      console.log(this.tourist);
      if (this.tourist === undefined || this.tourist.length === 0) {
        console.log('人员');
        this.tourristHide = '1';
        // this.$refs.abc.addClass('hidden');
      }
      // var html1 = '';
      // if(data.type == 1) {
      //   html1 = '成人';
      // } else
      // if(data.type == 2) {
      //   html1 = '儿童';
      // }
      // var html = '<li>' +
      //   '<div class="name_title"><span class="order_person ">' + html1 + '</span></div>' +
      //   '<div class="name_box rn_arrow_r edit_tour_name" data-id="' + data.id + '"><span>' + data.name + '</span></div>' +
      //   '</li>';
      // return html;
    },
    // 获取集合地点数据
    getPlaceList(code) {
      this.hdAjax({
        url: this.API.lineTourstPlace,
        data: {
          product_id: code
        },
        success: resultData => {
          console.log(resultData);
          resultData.data.assembling_place.forEach(element => {
            console.log(element);
            var dic = {
              label: element,
              callback: () => {
                this.collectionPlace = element;
                console.log(this.collectionPlace);
              }
            }
            this.tourPlaces.push(dic);
            console.log(this.tourPlaces);
          });
        }
      });
    },
    creatOrder(storeInfo) {
      // mui("#goodsorderbtn").button('loading');

      var tourist = this.tourist; // 出行人
      // var tour_list = [];
      var place = this.collectionPlace; // 集合地
      var name = this.name;
      var mobile = this.mobile;
      if (name === '' || name === undefined) {
        alert('请填写联系人姓名')
        // mui("#goodsorderbtn").button('reset');
        return false;
      }
      if (mobile === '' || mobile === undefined) {
        alert('请填写联系人电话！');
        // mui("#goodsorderbtn").button('reset');
        return false;
      }
      if (tourist.length < parseInt(this.g_manNum) + parseInt(this.g_childNum)) {
        alert('请选择出游人员');
        /* mui.toast('请选择出游人员');
        mui("#goodsorderbtn").button('reset'); */
        return false;
      }
      if (place === undefined || place === '') {
        alert('请选择集合地点！');
        // mui.toast('请选择集合地点！');
        // mui("#goodsorderbtn").button('reset');
        return false;
      }

      var obj = {
        'order_name': this.product_name, // 订单名
        'product_id': this.product_id, // 产品编码
        'sale_code': this.product_id, // 产品编码
        'tour_date': this.datetime, // 团期（出游日期）
        'adult_number': this.g_manNum, // 成人数
        'children_number': this.g_childNum, // 儿童数
        'mobile': this.mobile, // 联系人电话
        'name': this.name, // 联系人姓名
        'email': this.email, // 联系人邮箱
        'invoice': '0', // 是否需要发票 0不需要 1需要
        'create_by': 'LA001', // 发票名头
        'order_remark': '无',
        'total_integral': this.g_totalMoney // 总价格??
        // 'totalFee':$('.foot_price').data('money'),
        // 'discount': [{
        //   yhq: $('#userResultYh').data('code')
        // }]
      }
      console.log(obj);
      // for(var i = 0; i < tourist.length; i++) {
      //   var bh = tourist[i]['birthday'].split('-');
      //   tour_list[i] = {
      //     "name": tourist[i]['name'], // 游客姓名
      //     "mobile": tourist[i]['mobile'], // 游客电话（不可为空）
      //     "mobile_country": tourist[i]['country'], // 国家代码
      //     "english_surname": tourist[i]['english_surname'], // 英文姓
      //     "english_name": tourist[i]['english_name'], // 英文名
      //     "sex": tourist[i]['sex'], // 性别 1男 2女
      //     "tourist_type": tourist[i]['type'], // 游客类型 0儿童 1成人
      //     "card_type": tourist[i]['card_type'], // 用户有效证件号
      //     "cardno": tourist[i]['cardid'], // 用户有效证件号
      //     "birthday_day": bh[2], // 生日 天                               |
      //     "birthday_mouth": bh[1], // 生日 月                               |
      //     "birthday_year": bh[0], // 生日 年                               |
      //     "assembling_place": place // 集合 地点^时间 %分隔      集合信息时调接口查出来的单选
      //   }
      // }
      // obj.tourist = tour_list;
      // hdAjax({
      //   url: API().line.linecreateOrder,
      //   type: 'POST',
      //   data: JSON.stringify(obj),
      //   success: function(retData) {
      //     if(retData.errcode == '0') {
      //       mui("#goodsorderbtn").button('reset');
      //       $('#goodsorderbtn').data("loading-text", '等待支付');
      //       mui("#goodsorderbtn").button('loading');
      //       mui.toast('下单成功...等待支付');
      //       callpay({
      //         orderid: retData.data.orderCode,
      //         ticket: false,
      //         success: function(succData) {
      //           mui("#goodsorderbtn").button('reset');
      //           mui.toast('支付成功');
      //           hdOpenWindow("order_success_ticket.html?code=" + resultData.data);
      //         },
      //         error: function(errorData) {
      //           mui("#goodsorderbtn").button('reset');
      //           if(errorData.hderrorcode == -1) {
      //             if(errorData.err_msg == 'get_brand_wcpay_request:cancel') {
      //               mui.toast('支付取消');
      //             } else {
      //               mui.toast('支付失败:' + errorData.errMsg || errorData.err_msg);
      //             }

      //             return false;
      //           }
      //         }
      //       });
      //     } else {
      //       mui("#goodsorderbtn").button('reset');
      //       mui.toast(retData.errmsg);
      //     }
      //   }
      // });
    }
  }
}
</script>

<style>
  /*ul 样式*/
.order_rn_list {
    padding-left: 10px;
}
.order_rn_list li {
    position: relative;
    overflow: hidden;
    min-height: 42px;
}
.order_rn_list li:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 200%;
    height: 0;
    border-top: 1px solid #d4d4d4;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
.order_rn_list .name_title {
    float: left;
    width: 85px;
    padding-top: 11px;
    color: #333;
}
.order_rn_list .name_box {
    position: relative;
    overflow: hidden;
    padding: 11px 40px 10px 0;
    color: #333;
}
.rn_arrow_r:after, .rn_arrow_t:after, .rn_arrow_d:after {
    position: absolute;
    top: 50%;
    right: 15px;
    content: '';
    margin-top: -4px;
    width: 9px;
    height: 9px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}
.rn_arrow_r:after {
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
}
/*ul 之下的样式*/
.order_change_traveller {
    position: relative;
    padding: 10px;
}
.order_rn_traveller{
	 padding: 10px;
}
.order_change_traveller:before {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 200%;
    height: 0;
    border-top: 1px solid #d4d4d4;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left top;
    transform-origin: left top;
}
.guarantee_tips {
    color: #666;
    font-size: 11px;
    margin-bottom: 10px;
}
/*更换出行人或者添加出行人*/
.order_change_traveller .btn {
    position: relative;
    width: 150px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    color: #009fde;
    margin: 0 auto;
    border-radius: 6px;
}
.order_change_traveller .btn:before {
    border: 1px solid #009fde;
    width: 200%;
    height: 200%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 6px;
    content: "";
    -webkit-transform: scale(.5,.5);
    transform: scale(.5,.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
.order_rn_traveller .btn {
    display: block;
    margin: 0 auto 10px;
    width: 150px;
    line-height: 32px;
    background-color: #009fde;
    border-radius: 4px;
    color: #fff;
    text-align: center;
}
/*联系人信息*/

.order_rn_list li:not(.hidden):first-of-type:before {
    border: 0 none;
}
.order_rn_list .name_content {
    position: relative;
    overflow: hidden;
    padding-right: 40px;
}
.order_rn_list .name_content .rn_input_text {
    height: 42px;
    padding: 0;
}
.info_edit_tips {
    display: inline-block;
    background: #fff;
    width: 17px;
    height: 17px;
    z-index: 21;
    position: relative;
    vertical-align: -4px;
    margin-left: 5px;
}
.info_edit_tips:after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background-position: -52px 0;
    left: 0;
    top: 0;
}

.passenger_photograph:before, .info_edit_tips:after, .info_edit_content .name_content .phone_books, .add_traveller_tips::before, .passenger_photograph .links:after, .passenger_photograph .icon_correct, .weixin_txt .list dd:after, .weixin_txt02 .list dd:after, .pub_tips::before, .contacter_modbox .phone_books, .order_rn_box .phone_books:before, .p_bottom_notice .order_tips::before, .p_bottom_notice02 .order_tips::before {
    background-image: url(https://pic.c-ctrip.com/VacationH5Pic/group_travel/process/icon_add_traveller.png);
    background-repeat: no-repeat;
    background-size: 180px auto;
}
.pkg-clear-input {
    display: none;
    position: absolute;
    z-index: 10;
    top: 0;
    right: 0;
    width: 30px;
    height: 100%;
}
/*服务条款*/
.order_condition {
    background-color: #fff;
    overflow: hidden;
}
.p_bottom_notice02 {
    padding: 5px 15px;
}
.p_bottom_notice02 .order_tips {
    position: relative;
    font-size: 12px;
    color: #333;
    padding-left: 20px;
    margin: 5px 0;
}
.p_bottom_notice02 .order_tips::before {
    position: absolute;
    left: 0;
    top: 2px;
    width: 14px;
    height: 14px;
    content: "";
    background-position: 0 0;
}
.v_blue {
    color: #009fde;
}
.p_bottom_tips02 {
    font-size: 12px;
    color: #333;
    padding: 10px 15px;
    border-bottom: 1px solid #e2e2e2;
}
.p_bottom_tips02 .default {
    position: relative;
    padding-left: 20px;
}
.p_bottom_tips02 .selected::before {
    background-position: -36px 0;
}

/*公共的底部样式*/

.mui-bar-footer .item_col1 {
    font-size: 12px;
    padding: 0 10px;
}
.mui-bar-footer .item {
    display: table-cell;
    vertical-align: middle;
    height: 48px;
}
.mui-bar-footer .ft_sum_name,.mui-bar-footer .foot_order_price{
    color: #ff7d13;
}
.mui-bar-footer .price_detail {
    line-height: 48px;
    padding: 0 10px;
    text-decoration: underline;
    color: #666;
}
.hd-footer-right {
    background-color: orange;
}
.hd-footer-right .hd-btn {
    display: block;
    height: 44px;
    width: 100%;
    text-align: center;
    color: #fff;
    border: 1px solid orange;
    background-color: orange;
    /*line-height: 44px;*/
}
.hd-footer-right .mui-btn{
	top:0px;
}
.hd-footer-right a {
    color: #FFFFFF;
}
.hd-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 44px;
    line-height: 44px;
    background-color: #FFFFFF;
    padding: 0px;
}
body, button, input, select, textarea {
    font: 400 14px/1.5 Arial,"Lucida Grande",Verdana,"Microsoft YaHei",hei;
}
.mkt-ad-ccc .cm-slide div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    margin: 0;
    padding: 0;
}

.hidden {
    display: none !important;
}
.lyx_company_info .hd, .lyx_company_info .bd{
    border-color: transparent;
    -webkit-border-image: url(https://pic.c-ctrip.com/h5/group_travel/border_half.png?20150806.png) 2 stretch;
}

.lyx_company_info {
    position: relative;
    z-index: 91;
    height: 45px;
    background-color: #FFF;
}
/*头信息*/
.lyx_company_info .hd {
    height: 44px;
    line-height: 44px;
    color: #666;
    padding: 0 15px;
    background-color: #FFF;
    border-bottom: 1px solid #e2e2e2;
    overflow: hidden;
}
.lyx_company_info .hd .name {
    color: #333;
    margin: 0 6px;
}
.v_arrow_up:after, .v_arrow_down::after {
    content: "";
    width: 5px;
    height: 5px;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -2px;
    overflow: hidden;
    -webkit-transform: rotate(-135deg);
    -ms-transform: rotate(-135deg);
    transform: rotate(-135deg);
    border-left: 2px solid #fff;
    border-top: 2px solid #fff;
}

.v_arrow_down::after {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    margin-top: -7px;
}
/*主体*/
.lyx_company_info .bd {
    position: absolute;
    left: 0;
    width: 100%;
    padding: 10px 15px;
    background-color: #FFF;
    border-bottom: 1px solid #e2e2e2;
    box-sizing: border-box;
}

.lyx_company_info .bd .tips {
    font-size: 12px;
    color: #666;
}
.lyx_company_info .bd .tel {
    line-height: 20px;
    text-align: center;
    margin: 5px 0;
    padding: 6px 0;
    background-color: #eef8ff;
}

.mkt-ad-ccc fieldset, img, button, input {
    border: 0;
}
.lyx_content {
    padding: 10px;
    background-color: #99a5ae;
}

.order_rn_box .info_title {
    position: relative;
    padding: 0 10px;
    line-height: 42px;
    font-size: 16px;
    overflow: hidden;
    font-size: 12px;
    color: #999;
}
.order_rn_box .info_title:before {
    position: absolute;
    bottom: 0;
    left: 0;
    content: '';
    width: 200%;
    height: 0;
    border-top: 1px solid #d4d4d4;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
}
.order_rn_box .info_title .title_name {
    color: #333;
    margin-right: 10px;
    font-size: 14px;
    font-weight: bold;
}
.order_rn_box {
    position: relative;
    background-color: #fff;
    margin-bottom: 10px;
    box-shadow: 0 3px 2px 0 rgba(102,102,102,0.30);
    border-radius: 6px;
    overflow: hidden;
}

.order_rn_info {
    padding: 10px;
    overflow: hidden;
    background-color: #f3f3f3;
    border-radius: 4px;
}
.order_rn_info .item {
    float: left;
    font-size: 12px;
    color: #999;
}
.order_rn_info .item_date {
    width: 95px;
}
.order_rn_info .item_adult, .order_rn_info .item_children, .order_rn_info .item_baby {
    width: 45px;
    text-align: center;
}
.order_rn_info .item_restrict {
    position: relative;
    float: right;
    vertical-align: middle;
    color: #009fde;
    text-align: right;
    line-height: 38px;
     padding-left: 15px;
}

.order_rn_info .item_restrict:after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 0;
    height: 200%;
    border-left: 1px solid #d4d4d4;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: right top;
    transform-origin: right top;
    padding-left: 15px;
}
.order_rn_info .numb, .order_rn_info .time {
    display: block;
    font-size: 14px;
    color: #333;
    font-weight: bold;
}
/*在表单下可以放置  选择框*/
.mui-input-row label~div{
	line-height: 40px;
    float: left;
    width: 200px;
    margin-bottom: 0;
    padding-left: 0;
    border: 0;
}


/*加载样式*/

.weui-mask_transparent {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
}

.weui-toast {
	position: fixed;
	z-index: 5000;
	width: 7.6em;
	min-height: 7.6em;
	top: 180px;
	left: 50%;
	margin-left: -3.8em;
	background: rgba(40, 40, 40, 0.75);
	text-align: center;
	border-radius: 5px;
	color: #FFFFFF;
}

.weui-icon_toast {
	margin: 22px 0 0;
	display: block;
}

.weui-icon_toast.weui-icon-success-no-circle:before {
	color: #FFFFFF;
	font-size: 55px;
}

.weui-icon_toast.weui-loading {
	margin: 30px 0 0;
	width: 38px;
	height: 38px;
	vertical-align: baseline;
}

.weui-toast__content {
	margin: 0 0 15px;
}

.weui-loading {
	width: 20px;
	height: 20px;
	display: inline-block;
	vertical-align: middle;
	-webkit-animation: weuiLoading 1s steps(12, end) infinite;
	animation: weuiLoading 1s steps(12, end) infinite;
	background: transparent url() no-repeat;
	background-size: 100%;
}
@-webkit-keyframes weuiLoading {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}
@keyframes weuiLoading {
  0% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
            transform: rotate3d(0, 0, 1, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 0, 1, 360deg);
            transform: rotate3d(0, 0, 1, 360deg);
  }
}
/*加载样式 结束*/
/*底部样式*/
.mod_foot_acitons {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99;
    height: 48px;
    line-height: 48px;
    font-size: 14px;
    white-space: nowrap;
    border-top: 1px solid #CCC;
    background-color: #f9f9f9;
    box-sizing: border-box;
}
.foot_order_info2 {
    line-height: 16px;
}
.foot_order_info {
    position: relative;
    z-index: 2;
    display: table;
    table-layout: fixed;
    width: 100%;
    height: 100%;
    color: #ff7d13;
    white-space: nowrap;
    word-wrap: normal;
}
.foot_order_info2 .item {
    vertical-align: top;
}
.foot_order_info .item_col1 {
    padding-left: 15px;
}
.foot_order_info .item {
    display: table-cell;
    vertical-align: middle;
}
.foot_order_info .loading_ico, .mod_order_info .loading_ico {
    width: 25px;
    height: 25px;
    background-position: 0 0;
}
.loading_ico {
    width: 25px;
    height: 25px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 6px;
    -webkit-animation: forward_loading 1.58s linear infinite;
    -moz-animation: forward_loading 1.58s linear infinite;
    -ms-animation: forward_loading 1.58s linear infinite;
    animation: forward_loading 1.58s linear infinite;
    transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    background: url(https://pic.c-ctrip.com/h5/group_travel/loading_orange.png) 0 0;
    background-size: 25px 25px;
}
.foot_order_info2 .item_col2 {
    width: 85px;
}
.foot_order_info2 .item_col3 {
    width: 85px;
}
.mod_foot_acitons .btn_link4 {
    display: block;
    height: 48px;
    line-height: 30px;
    font-size: 16px;
    color: #333;
    text-align: center;
    border-left: 1px solid #DDD;
    background-color: #FFF;
}
.mod_foot_acitons .btn_link4 span, .mod_foot_acitons .btn_link5 span {
    display: block;
    min-width: 64px;
    width: 64px;
    font-size: 12px;
    line-height: 16px;
    text-align: left;
    margin: -4px auto 0;
}
.mod_foot_acitons .btn_link5 {
    line-height: 30px;
}
.mod_foot_acitons .btn_link, .mod_foot_acitons .btn_link2, .mod_foot_acitons .btn_link3, .mod_foot_acitons .btn_link5 {
    display: block;
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    text-align: center;
    color: #FFF;
    background-color: #ff9b00;
    position: relative;
    top: -1px;
}
.yd-actionsheet {
  height: 140px;
  overflow-y: scroll;
}
</style>
